<template>
    <view>
        <u--form labelWidth="90" labelAlign="center" :model="exp" :rules="rules" ref="uForm">
            <u-form-item label="快递单号" prop="code" borderBottom ref="item1">
                <u--input v-model="exp.code" border="none" placeholder="请输入快递单号"></u--input>
            </u-form-item>

            <u-form-item label="快递公司" prop="name" borderBottom @click="show = true" ref="item1">
                <u--input v-model="exp.name"  disabledColor="#ffffff" placeholder="请选择快递公司"
                    border="none"></u--input>
                <u-icon slot="right" name="arrow-right"></u-icon>
            </u-form-item>
        </u--form>

        <u-picker :show="show" :columns="columns" keyName="label" @cancel="onClose" @close="onClose"
            @confirm="onConfirm" closeOnClickOverlay></u-picker>

        <u-button type="primary" @click="onSubmit">提交</u-button>
        <u-toast ref="uToast"></u-toast>
    </view>
</template>

<script>
export default {
    data() {
        return {
            LoginAdmin: {},
            show: false,
            columns: [[]],
            exp: {
                // 单号
                code: "",
                // 快递公司
                name: "",
                // 快递公司id
                id: "",
            },
            rules: {
                code: [
                    {
                        required: true,
                        message: "请输入快递单号",
                        trigger: ["blur", "change"],
                    },
                ],
                name: [
                    {
                        required: true,
                        message: "请选择快递公司",
                        trigger: ["blur", "change"],
                    },
                ],
            },
            id: "",
        };
    },
    methods: {
        // 获取快递公司数据
        async ExpressList() {
            let result = await this.$u.api.manage.getExpress();

            if (result.code == 1 && result) {
                result.data.forEach((item) => {
                    this.columns[0].push({
                        label: item.name,
                        id: item.id,
                    });
                });
            }
        },
        onClose() {
            this.show = false;
        },
        onConfirm(e) {
            this.exp.name = e.value[0].label;
            this.exp.id = e.value[0].id;
            this.show = false
        },
        onSubmit() {
            this.$refs.uForm.validate().then(async () => {
                let data = {
                    id: this.id,
                    expid: this.exp.id,
                    expcode: this.exp.code,
                    adminid: this.LoginAdmin.id
                }
                let result = await this.$u.api.manage.productExp(data);
                if (result.code == 1 && result) {
                    this.$refs.uToast.show({
                        type: "success",
                        message: result.msg,
                        complete: () => {
                            this.$u.route('/pages/manage/productorder/index');
                        },
                    });
                } else {
                    this.$refs.uToast.show({
                        type: "error",
                        message: result.msg,
                    })
                }
            }).catch((err) => {
                console.log(err);
            })



        }
    },
    onLoad(options) {
        this.LoginAdmin = uni.getStorageSync("admin") ?? {};
        this.id = options.id;
        this.ExpressList();
    },
    onReady() {
        //如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
        this.$refs.uForm.setRules(this.rules);
    },
};
</script>
